<template>
  <div>
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../../assets/l_jt.png" alt />
      <span>忘记密码</span>
    </div>

    <div class="login_srk sjzc" style="display: block;">
      <div class="login_mm">
        <input class="phone" type="text" v-model="mobile" placeholder="请输入您的手机号" />
      </div>
      <div class="login_mm" style="overflow: hidden;width: 90%;margin: auto;">
        <input type="password" v-model="code" placeholder="请输入验证码" class="get_code" />
        <button type="button" id="getcode" class="waves-effect" @click="obtain">{{djs}}</button>
      </div>
        <div class="login_mm">
        <input class="phone" type="text" v-model="new_pwd" placeholder="请输入您的新密码" />
      </div>
    </div>

    <div class="dlan">
      <button class="next_b" @click="push" type="button" data-type="1">确认重置</button>
    </div>
  </div>
</template>

<script>
import { setTimeout } from 'timers';
export default {
  data() {
    return {
        djs:"获取验证码",
        mobile:"",
        code:"",
        new_pwd:""
    };
  },
  methods: {
    obtain() {
      if (this.djs.indexOf("s") != -1) return;
      var reg = /^1[3456789]\d{9}$/;
      if (!this.mobile)
        return this.$createToast({ txt: "请输入手机号", type: "txt" }).show();
      if (!reg.test(this.mobile)) {
        return this.$createToast({
          txt: "请输入正确手机号",
          type: "txt"
        }).show();
      }
      this.$axios
        .post("/index/publics/sendChange", { mobile: this.mobile })
        .then(res => {
          if (res.data.code == 0) {
            this.$createToast({
              txt: "发送成功",
              type: "txt"
            }).show();
            this.djs = "60s";
            var ts = this;
            var time = setInterval(function() {
              var num1 = parseInt(ts.djs);
              if (num1 <= 1) {
                ts.djs = "重新发送";
                clearInterval(time);
              } else {
                ts.djs = --num1 + "s";
              }
            }, 1000);
          } else {
            this.$createToast({ txt: res.data.message, type: "txt" }).show();
          }
        });
    },
    push(){
        if(!/^1[3456789]\d{9}$/.test(this.mobile)){
            this.$createToast({ txt: "请输入手机号码", type: "txt" ,time:1100}).show();
            return;
        }
        if(!this.code){
            this.$createToast({ txt: "请输入验证码", type: "txt" ,time:1100}).show();
            return;
        }
        if(!this.new_pwd){
            this.$createToast({ txt: "请输入新密码", type: "txt" ,time:1100}).show();
            return;
        }
        this.$axios
        .post("/index/publics/changeSave", {
            code:this.code,
            mobile:this.mobile,
            new_pwd:this.new_pwd
        })
        .then(res => {
            this.$createToast({ txt: res.data.message, type: "txt" ,time:1200}).show();
            if(res.data.code==0){
                setTimeout(()=>{
                    this.$router.push("/");
                },1200)
            }
        })
    }
  }
};
</script>


<style lang="less" scoped>
.login_bj {
  width: 100%;
  height: 6.4rem;
  background: url(/zc/img/login.png) no-repeat center;
  background-size: cover;
}
.login_zh {
  width: 100%;
  padding: 0.2rem 0;
  display: flex;
  display: -webkit-flex;
}
.login_srk {
  width: 100%;
  margin-top: 0.4rem;
}
.login_zh p {
  font-size: 0.45rem;
  color: #333;
  text-align: right;
}
.login_zh input {
  margin-left: 0.1rem;
  background: #fff;
  border: 0;
  color: #333;
  font-size: 0.4rem;
  line-height: 0.6rem;
  border-bottom: 0.1px #b3b3b3 solid;
}
.login_mm {
  overflow: hidden;
  padding: 0.2rem 0;
  margin-top: 0.3rem;
  display: flex;
  display: -webkit-flex;
}
.login_mm p {
  font-size: 0.45rem;
  width: 2.633333rem;
  color: #333;
  text-align: right;
}
.login_mm input {
  margin-left: 0.1rem;
  background: #fff;
  border: 0;
  width: 80%;
  color: #333;
  font-size: 0.4rem;
  line-height: 0.6rem;
  border-bottom: 0.1px #b3b3b3 solid;
}
.wjmm {
  width: 80%;
  height: 0.6rem;
  margin: auto;
  margin-top: 0.1rem;
  text-align: right;
}
.wjmm a {
  font-size: 0.35rem;
  line-height: 0.6rem;
  color: #03be87;
}
.dlan {
  width: 100%;
  margin-top: 0.5rem;
}
.dlan button {
  width: 80%;
  display: block;
  border: 1px solid #03be87;
  border-radius: 0.5rem;
  margin: auto;
  background: #03be87;
  font-size: 0.5rem;
  color: #fff;
  text-align: center;
  line-height: 1rem;
  box-shadow: 0px 2px 5px #bfbfbf;
}
.zc {
  margin-top: 0.3rem;
  font-size: 0.35rem;
  color: #333;
  text-align: center;
}
.zc a {
  color: #03be87;
}
.login_yqm {
  width: 80%;
  margin: auto;
  overflow: hidden;
  padding: 0.2rem 0;
  margin-top: 0.3rem;
  display: flex;
  display: -webkit-flex;
}
.login_yqm p {
  font-size: 0.45rem;
  color: #333;
  width: 3.633333rem;
  text-align: right;
}
.login_yqm input {
  margin-left: 0.1rem;
  background: #fff;
  border: 0;
  color: #333;
  font-size: 0.4rem;
  line-height: 0.6rem;
  border-bottom: 0.1px #b3b3b3 solid;
  width: 80%;
}
.yzm {
  width: 73.33%;
  margin: auto;
  overflow: hidden;
  margin-top: 0.3rem;
}
.yzm input,
.yzm p {
  float: left;
}
.yzm input {
  width: 65%;
  font-size: 0.4rem;
  color: #333;
  line-height: 0.8rem;
  border: 0;
  border-bottom: 1px solid #b3b3b3;
}
.yzm p {
  width: 24%;
  font-size: 0.35rem;
  color: #fff;
  background: #03be87;
  border-radius: 0.1rem;
  text-align: center;
  line-height: 0.8rem;
  float: right;
  padding: 0 0.2rem;
}

/*#getcode, #mcode {
			position: absolute;
			right: 0;
			bottom: 1px;
			line-height: 1rem;
			color: #F65656;
			background: none;
			border: none;
		}*/
.zcqh {
  width: 90%;
  margin: auto;
  display: flex;
  display: -webkit-flex;
  margin-top: 0.4rem;
}
.zcqh .zc1 {
  color: #333;
  font-size: 0.45rem;
  height: 0.5rem;
}
.zcqh .zc1.active {
  color: #03be87;
}
.login_mm input {
  width: 90%;
  margin: auto;
  border-radius: 0.2rem;
  border: 1px solid #f1f1f1;
  height: 1rem;
  line-height: 1rem;
}
.login_mm input,
.login_mm button {
  display: block;
  float: left;
}
.login_mm .get_code {
  width: 70%;
  float: left;
}
.login_mm #getcode,
.login_mm #emailcode {
  width: 25%;
  margin-left: 5%;
  background: #03be87;
  border-radius: 0.2rem;
  border: 1px solid #03be87;
  color: #fff;
  font-size: .34rem;
  line-height: 1rem;
}
.dlan button {
  width: 90%;
  border-radius: 0.1rem;
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%);
}
</style>
